<template>
  <div class="PlayList">
    <h1>官方歌单</h1>

    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="item in playListData" :key="item.content_id" @click="selectPlayList(item)">
          <div class="cover_num">
            <img :src="item.cover" alt="#" />
            <span>{{ (item.listen_num / 10000).toFixed(1) }}万</span>
          </div>
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";
export default {
  name: "PlayList",
  components: {},
  data() {
    return {
      playListData: []
    };
  },
  created() {
    this.getPlayList();
  },
  methods: {
    getPlayList() {
      var that = this;
      axios
        .get("api/recommend/playlist/u")
        .then(res => {
          var data = res.data.data;
          // console.log(data);
          that.playListData = data.list;
          this.betterScrollHorizontal(this.playListData.length, 120);
        })
        .catch(err => {
          console.error(err);
        });
    },

    betterScrollHorizontal(num, itemWidth) {
      let width = num * itemWidth;
      this.$refs.content.style.width = width + "px";
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true,
          startX: 0,
          scrollX: true, //横向为true
          scrollY: false
        });
      });
    },

    selectPlayList(item) {
      // console.log(item)
      const id = item.content_id;
      this.$router.push({
        name: "PlayListDetail",
        params: { id }
      });
    }
  }
};
</script>

<style scoped>
.PlayList {
  width: 90%;
  margin: 0 auto;
}
.PlayList > h1 {
  font-size: 20px;
}
.wrapper {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}
ul.content > li {
  text-align: center;
  display: inline-block; /**设置为行内元素 */
  width: 120px; /**宽度需要 */
  vertical-align: top;
}
ul.content > li img {
  border-radius: 20px;
  width: 90%;
  height: 90%;
}
ul.content > li > span {
  display: block;
  width: 90%;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
}
.cover_num {
  position: relative;
}
.cover_num > span {
  position: absolute;
  right: 18px;
  bottom: 8px;
  z-index: 100;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  opacity: 0.75;
  font-size: 15px;
  padding: 0px 5px;
}
</style>